<template>
    <div class="Writer_An_Article">
        <Header></Header>
        <div class="Writer_An_Article-Pc">
            <div class="content">
                <div class="top1">
                    <div class="left">
                        《 返回奇点社区
                    </div>
                    <div class="middle">
                        写文章
                    </div>
                    <div class="right">
                        <div class="btn">
                            <button class="button2">
                                发布
                            </button>
                        </div>
                        <div class="btn">
                            <button class="button1">
                                预览
                            </button>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="top2">
                        Markdown编辑器，由伟大的魏苏航同学代写，小弟在此感激万分！！
                    </div>
                    <div class="top3">
                        <div class="box1">
                            <div class="top">
                                回测
                            </div>
                            <div class="bottom">
                                +添加
                            </div>
                        </div>
                        <div class="box1">
                            <div class="top">
                                研究
                            </div>
                            <div class="bottom">
                                +添加
                            </div>
                        </div>
                        <div class="box2">
                            <div class="top">
                                附件
                            </div>
                            <div class="bottom">
                                +添加
                            </div>
                        </div>
                    </div>
                    <div class="top4">
                        <div class="top">
                            <div class="left">
                                标签
                            </div>
                            <div class="right">
                                (准确的标签使文章更容易让其他人看到，请选择1~5个标签)
                            </div>
                        </div>
                        <div class="label">
                            <Tag2 
                            v-for="(item,index) in tags" 
                            :key="index" 
                            :content="item.content"
                            :focus="item.focus"
                            >
                            </Tag2>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                自定义标签
                            </div>
                            <div class="middle">
                                0/10
                            </div>
                            <el-popover
                            placement="right"
                            width="500"
                            trigger="click">
                            <div class="add-new-tag-box">
                                <el-input
                                    placeholder="标签名"
                                    v-model="tagName"
                                >
                                </el-input>
                                <el-button type="primary" plain @click="addNewTag">添加</el-button>
                            </div>
                               
                            <div class="right" slot="reference">
                                +添加
                            </div>
                            </el-popover>
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Writer_An_Article-Mobile">
            <div class="content">
                <div class="top1">
                    编辑主题
                </div>
                <div class="top2">
                    <div class="top">
                        标题
                    </div>
                    <div class="middle">
                        <el-select v-model="value" placeholder="文章" >
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="bottom">
                        <el-input v-model="input" placeholder="请输入文章标题"></el-input>
                    </div>
                </div>
                <div class="top3">
                    <div class="top">
                        内容
                    </div>
                    <div class="middle">
                        Markdown编辑器，由伟大的魏苏航同学代写，小弟在此感激万分！！
                    </div>
                </div>
                <div class="top4">
                    <div class="top">
                        <div class="left">
                            回测
                        </div>
                        <div class="right">
                            （所选回测的结果会插入到主题中）
                        </div>
                    </div>
                    <div class="select">
                        <el-select v-model="value" placeholder="回测方式" >
                            <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="top4">
                    <div class="top">
                        <div class="left">
                            研究
                        </div>
                        <div class="right">
                            （所选研究的结果会插入到主题中）
                        </div>
                    </div>
                    <div class="select">
                        <el-select v-model="value" placeholder="研究方式" >
                            <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div> 
                <div class="top5">
                    <div class="top">
                        <div class="left">
                            悬赏
                        </div>
                        <div class="right">
                            <el-switch
                                v-model="value5"
                                active-color="#13ce66"
                                inactive-color="#ff4949">
                            </el-switch>
                        </div>
                    </div>
                    <div class="bottom">
                        悬赏金额:<el-input v-model="input5" placeholder="请输入金额内容"></el-input>注：悬赏金额：5元~10000元，<a>查看悬赏规则</a>
                    </div>
                </div>
                <div class="bottom6">
                    <div class="button1">
                        <button class="btn1">
                            预览
                        </button>
                    </div>
                    <div class="button2">
                        <button class="btn2">
                            发布
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Tag2 from '@/components/tags/Tag2.vue'
import Header from '@/components/Header.vue'
export default {
    name:"Writer_An_Article", 
    data() {
        return {
        tagName:'',
        value5: 'true',
        input5: '',
        input: '',
        tags:[{
             content:'讨论',
             focus: false
            },
            {
             content:'研报分享',
             focus: false
            },
            {
             content:'期权',
             focus: false
            },
            {
             content:'择时',
             focus: false
            },
            {
             content:'机器学习',
             focus: false
            },
            {
             content:'多因子',
             focus: false
            },
            {
             content:'研报复现',
             focus: false
            },
            {
             content:'研究',
             focus: false
            },
            {
             content:'函数',
             focus: false
        }],
        options: [
            {
                value: '选项1',
                label: '文章'
            }
        ],
        options1: [
            {
                value: '选项1',
                label: '文章'
            }
        ],
        options2: [
            {
                value: '选项1',
                label: '文章'
            }
        ],
        }
    },
    methods:{
        addNewTag(){
            console.log(1)
            this.tags.push({content:this.tagName,focus:true})
        }
    },
    components:{
        Header,
        Tag2
    },
}
</script>
<style scoped>
@media screen and (min-width:981px){
.Writer_An_Article-Pc{
    display: block;
    width:100%;
    overflow: hidden;
}
.Writer_An_Article-Mobile{
    display: none;
}
.content{
    padding-top:57px; 

}
.top1{
    width: 100%;
    padding:15px 0px 15px 0px;
    height: 65px;
    border-bottom:1px solid #e6e6e6; 
}
.top1 .left{
    float: left;
    width:30%;
    height: 35px;
    font-size:15px;
    line-height: 35px;
    color: rgb(173, 173, 173);
}
.top1 .middle{
    float: left;
    width:40%;
    height: 35px;
    font-size:20px;
    line-height: 35px;
    text-align: center;
}
.top1 .right{
    float: right;
    width:30%;
    height: 35px;
}
.top1 .right .btn{
    float: right;
    width:90px;
    height: 35px;
    margin-left: 15px;
}
.top1 .right .btn .button1{
    width:90px;
    height: 35px;
    border: 1px solid rgb(59, 59, 245);
    color: rgb(59, 59, 245);
}
.top1 .right .btn .button2{
    width:90px;
    height: 35px;
    background:rgb(59, 59, 245);
    color:white;
}
.box{
    width:100%;
    padding:20px 100px 0 100px;
}
.box .top2{
    width: 100%;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
}
.box .top3{
    width:100%;
    height: 110px;
}
.box .top3 .box1{
    width:31%;
    float: left;
    height: 110px;
    margin-right:3%; 
}
.box .top3 .box1 .top{
    width:100%;
    height: 40px;
    font-size: 17px;
    line-height: 40px;
}
.box .top3 .box1 .bottom{
    width:100%;
    height: 70px;
    border: 1px dashed rgb(59, 59, 245);
    font-size: 15px;
    vertical-align:middle;
    text-align: center;
}
.box .top3 .box2{
    width:30%;
    float: right;
    height: 110px;
    margin-right:2%; 
}
.box .top3 .box2 .top{
    width:100%;
    height: 40px;
    font-size: 17px;
    line-height: 40px;
}
.box .top3 .box2 .bottom{
    width:100%;
    height: 70px;
    border: 1px dashed rgb(59, 59, 245);
    font-size: 15px;
    vertical-align:middle;
    text-align: center;
}
.box .top4{
    width:100%;
    padding-top:30px;
}
.box .top4 .top{
    width:100%;
    height: 60px;
}
.box .top4 .top .left{
    float: left;
    font-size: 17px;
    line-height: 60px;
}
.box .top4 .top .right{
    float: left;
    font-size: 12px;
    line-height: 60px;
    color: #9e9b9b;
}
.box .top4 .label{
    width:100%;
    display: inline-block;
    height: 90px;
}
.box .top4 .label .btn-label{
    font-size: 15px;
    border-radius: 30px; 
    margin-right:10px; 
    margin-bottom:10px; 
}
.box .bottom{
    width:100%;
    margin-top:20px;
    background: white;
}
.box .bottom .left{
    float: left;
    width:150px;
    font-size: 14px;
    line-height: 30px;
    color: #9e9b9b;
}
.box .bottom .middle{
    float: left;
    width:50px;
    font-size: 14px;
    line-height: 30px;
    color: #9e9b9b;
}
.box .bottom .right{
    float: left;
    width: 80px;
    line-height: 30px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 40px; 
    color: rgb(95, 94, 94);
    cursor: pointer;
    text-align: center;
}
.add-new-tag-box{
    display: flex;
    justify-content: space-between;
    height: 40px;
}
}
@media screen and (max-width:980px){
.Writer_An_Article-Pc{
    display: none;
}
.Writer_An_Article-Mobile{
    display: block;
    width:100%;
    overflow: hidden;
}
.content{
    padding:57px 5px 57px 5px; 
    width:100%;
}
.top1{
    width:100%;
    height: 130px;
    font-size: 35px;
    line-height: 150px;
}
.top2{
    width:100%;
}
.top2 .top{
    width:100%;
    height: 65px;
    font-size: 25px;
    line-height: 65px;
}
.top2 .middle{
    width:100%;
    height: 40px;
    margin-bottom:10px;
}
.top2 .right{
    width:100%;
    height: 40px;
    margin-bottom:20px;
}
.top3{
    width:100%;
}
.top3 .top{ 
    width:100%;
    height: 65px;
    font-size: 25px;
    line-height: 65px;
}
.top3 .middle{
    width:100%;
    font-size: 15px;
    color: red;
    display: inline-block;
    text-align: center;
}
.top4 .top{
    width:100%;
    height: 65px;
}
.top4 .top .left{ 
    float:left;
    width:20%;
    height: 65px;
    font-size: 25px;
    line-height: 65px;
}
.top4 .top .right{
    float: left;
    height: 65px;
    font-size: 15px;
    line-height: 65px;
    color: #7e7d7d;

}
.top5{
    width:100%;
}
.top5 .top{
    width:100%;
    height: 65px;
}
.top5 .top .left{
    float:left;
    width:20%;
    height: 65px;
    font-size: 25px;
    line-height: 65px;
}
.top5 .top .right{
    float: left;
    height: 65px;
    line-height: 65px;
}
.top5 .bottom{
    width:100%;
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
}
.bottom6{
    width:100%;
    height: 100px;
}
.bottom6 .button1{
    float: left;
    width:20%;
    height: 50px;
    margin-left:20%;
    margin-right:20%; 
    line-height: 100px;
}
.bottom6 .button1 .btn1{
    width:100%;
    height: 50px;
    background: rgb(59, 59, 245);
    color: white;
}
.bottom6 .button2{
    float: left;
    width:20%;
    height: 50px;
    margin-right:20%; 
    line-height: 100px;
}
.bottom6 .btn2{
    height: 50px;
    width:100%;
    background: rgb(59, 59, 245);
    color: white;
    
}
}
</style>